<!--  -->
<template>
  <div class="app-container">
    <!-- START 卡片视图 START -->
    <el-card style="height: 80px; margin-bottom: 10px;">
      <!-- START 搜索与添加按扭区域 START -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            v-model="queryInfo.roleName"
            placeholder="请输入要搜索的角色名"
            clearable
            @clear="getRolesList"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getRolesList"
            />
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary"  icon="el-icon-circle-plus-outline" @click="openRoleDialog">添加角色</el-button>
        </el-col>
      </el-row>
      <!--  END 搜索与添加按扭区域 END -->
    </el-card>
    <!-- END 卡片视图 END -->

    <!-- START 角色列表区域 START -->
    <el-card>
      <el-table :data="roleList" :stripe="true" v-loading="listLoading" :border="true" style="width: 100%">
        <el-table-column label="ID" prop="id" sortable="custom" align="center" width="60">
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="英文名称" width="300px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="中文名称" width="300px" align="center">
          <template slot-scope="{row}">
            <span>{{ row.nameZh }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <!-- 使用作用域插槽的形式为[角色等级]列自定义内容，使用scope来接收所有的数据 -->
          <template slot-scope="scope">
            <!-- 编辑按扭 -->
            <el-button icon="el-icon-edit" type="primary" size="mini" plain round @click="showEditDialog(scope.row)">编辑</el-button>
            <!-- 删除按扭 -->
            <el-button icon="el-icon-delete" type="danger" plain round size="mini" @click="delRoleById(scope.row)">删除</el-button>
            <!-- 分配权限按扭 -->
            <el-button icon="el-icon-setting" type="success" size="mini" plain round @click="assignRightToRole(scope.row)">分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- START 分页区 START -->
      <pagination v-show="totalCount>0" :total="totalCount" :page.sync="queryInfo.currPageNo" :limit.sync="queryInfo.pageSize" @pagination="getRolesList" />
      <!-- END 分页区 END -->

    </el-card>
    <!-- END 权限列表区域 END -->
    <!-- START 添加角色弹出对话框窗口 START -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="480px">
      <el-form ref="dataFormRef" :rules="rules" :model="role" label-position="left" label-width="80px" style="width: 400px; margin-left:20px;">
            <el-form-item label="英文名" prop="name">
              <el-input v-model="role.name" placeholder="角色英文名" />
            </el-form-item>
            <el-form-item label="中文名" prop="nameZh">
              <el-input v-model="role.nameZh" placeholder="角色中文名" />
            </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelEvent()">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?insertData():updateData()">
          确认
        </el-button>
      </div>
    </el-dialog>
    <!-- END 添加角色弹出对话框窗口 END -->
    <!-- START 分配权限 START -->
    <el-dialog
      title="分配权限"
      :visible.sync="assignRightVisible"
      width="50%">
      <!-- START 主体内容部分——权限树形控件 START -->
      <!-- :default-expanded-keys="[2, 3]"
        :default-checked-keys="[5]" -->
      <el-tree
        :data="treeRightList"
        show-checkbox
        node-key="id"
        :props="defaultProps" ref="assignRightRef">
      </el-tree>
      <!-- END 主体内容部分——权限树形控件 END -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="assignRightVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAssignMenu">确 定</el-button>
      </span>
    </el-dialog>
    <!-- END 分配权限 END -->
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// 从 /api/role.js中解构出 pageRoleList方法，在当前组件中导入
import { pageRoleList,saveRole,findByRoleId,updateRole,delRoleByRoleId,assignMenu } from '@/api/role'
import {getAllMenuList,getMenuIdsByRoleId} from '@/api/menu'
// 导入分页公共组件
import Pagination from '@/components/Pagination'
export default {
// import引入的组件需要注入到对象中才能使用
  components: {
    // 在当前组件中进行注册
    Pagination
  },
  data() {
    // 这里存放数据
    return {
      // 查询条件
      queryInfo: {
        roleName: '', // 角色名
        currPageNo: 1, // 当前页码
        pageSize: 4// 每页显示5条数据
      },
      // 角色列表
      roleList: [],
      // 用来保存分页时所需要的总记录数
      totalCount: 0, // 当发送异步请求用户列表数据时设置它为true,可出现正在加载中
      listLoading: true,
      
      dialogStatus:"",
      textMap:{
         update: '编辑',
         create: '添加',
         assign: '分配权限'
      },
      dialogFormVisible:false,
      role:{
        id:undefined,
        name:"",
        nameZh:""
      },
      rules:{
        name:[
           { required: true, message: '角色英文名必填', trigger: 'blur' },
           { min: 2, max: 30, message: '姓名的长度在2~30个字符之间', trigger: 'blur' }
        ],
        nameZh:[
          { required: true, message: '角色中文名必填', trigger: 'blur' },
          { min: 2, max: 15, message: '姓名的长度在2~15个字符之间', trigger: 'blur' }
        ]
      },
      assignRightVisible:false,//控制分配权限弹框的显示和隐藏
      treeRightList:[],//分配权限树形组件要显示数据
      defaultProps:{//控制树形组件显示的属性
        label:"name",
        children:"children"
      },
      rid:null,//用来接收分配权限的角色id
      
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getRolesList()
  },
  // 方法集合
  methods: {
    // 重置Role对象
    resetRole() {
      this.role = {
         id: undefined,
         name: '',
         nameZh: '' 
      }
    },
    // 添加角色按扭的点击事件
    openRoleDialog() { 
      //1.显示新增弹框
      this.dialogFormVisible=true;
      //2.设置标题
      this.dialogStatus="create";
    },
    // 按角色的英文名或中文名模糊查询角色的分页列表信息
    getRolesList() {
      // true时，表格中就会出现正在加载图标
      this.listLoading = true
      pageRoleList(this.queryInfo).then((res) => {
        // false时，正在加载图标就会消失
        this.listLoading = false
        this.roleList = res.data.list
        // 获取总记录数
        this.totalCount = res.data.totalCount
      }).catch((err) => {
        console.log(err)
      })
    },
    //取消
    cancelEvent(){
      //关闭弹框
      this.dialogFormVisible=false;
      //清空表单
      this.resetRole();
    },
    //新增
    insertData(){
      this.$refs['dataFormRef'].validate((valid)=>{
          if(valid){//验证成功
            //调用api方法进行异步请求
            saveRole(this.role).then((res)=>{
              if(res.code==200){//新增成功
                //1.给出提示
                this.$message({
                  title: '提示',
                  message: res.message,
                  type: 'success',
                  duration: 2000
                })
                //2.关闭弹框
                this.dialogFormVisible=false;
                //3.刷新列表
                this.getRolesList();
                //4.清空表单
                this.resetRole();
              }else{//新增失败
                //给出提示
                this.$message({
                  title: '提示',
                  message: res.message,
                  type: 'error',
                  duration: 2000
                })
              }
            }).catch((err)=>{
              console.log(err);
            })
          }
      })
    },
    //编辑
    showEditDialog(row){
      //1.显示弹框
      this.dialogFormVisible=true;
      //2.设置标题
      this.dialogStatus="update";
      //3.发送异步请求查询要修改的数据
      findByRoleId(row.id).then((res)=>{
          this.role=res.data;
      }).catch((err)=>{
        console.log(err);
      })
    },
    //修改
    updateData(){
      this.$refs['dataFormRef'].validate((valid)=>{
          if(valid){//验证成功
            //调用api方法进行异步请求
            updateRole(this.role).then((res)=>{
              if(res.code==200){//新增成功
                //1.给出提示
                this.$message({
                  title: '提示',
                  message: res.message,
                  type: 'success',
                  duration: 2000
                })
                //2.关闭弹框
                this.dialogFormVisible=false;
                //3.刷新列表
                this.getRolesList();
                //4.清空表单
                this.resetRole();
              }else{//新增失败
                //给出提示
                this.$message({
                  title: '提示',
                  message: res.message,
                  type: 'error',
                  duration: 2000
                })
              }
            }).catch((err)=>{
              console.log(err);
            })
          }
      })
    },
    //删除
    delRoleById(row){
      //1.弹出确认框
       this.$confirm('确认要删除当前角色信息吗?', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
       }).then(()=>{
          //2.发送异步请求进行删除
          delRoleByRoleId(row.id).then((res)=>{
              if(res.code==200){//删除成功
                  //1.提示
                  this.$message({
                    title: '提示',
                    message: res.message,
                    type: 'success',
                    duration: 2000
                  })
                  //2.刷新列表
                  this.getRolesList();
              }else{//删除失败
                  //给出错误提示
                  this.$message({
                    title: '提示',
                    message: res.message,
                    type: 'error',
                    duration: 2000
                  })
              }
          }).catch((err)=>{
            console.log(err);
          })
       })
      
    },
    //分配权限
    assignRightToRole(row){
      //1.弹框
      this.assignRightVisible=true;
      //2.发送异步请求查询可供选择的权限树
      getAllMenuList().then((res)=>{
        this.treeRightList=res.data;
      }).catch((err)=>{
        console.log(err);
      })
      //3.设置要分配权限的角色id
      this.rid=row.id;
      //4.查询该角色所拥有的权限
      getMenuIdsByRoleId(row.id).then((res)=>{
         this.$refs['assignRightRef'].setCheckedKeys(res.data.mid);
      }).catch((err)=>{
        console.log(err);
      })
    },
    //保存分配的权限
    saveAssignMenu(){
      //1.获取全选和半选中的树形节点
      let checkKeys=this.$refs['assignRightRef'].getCheckedKeys();
      let halfCheckKeys=this.$refs['assignRightRef'].getHalfCheckedKeys();
      let mid=checkKeys.concat(halfCheckKeys);
      if(mid.length>0){
        assignMenu({rid:this.rid,mid:mid}).then((res)=>{
            if(res.code==200){
                //1.给出提示
                this.$message({
                  title: '提示',
                  message: res.message,
                  type: 'success',
                  duration: 2000
                });
                //2.刷新列表数据
                this.getRolesList();
                //3.关闭新增弹框
                this.assignRightVisible=false;
            }else{
              this.$message({
                  title: '提示',
                  message: res.message,
                  type: 'error',
                  duration: 2000
              })
            }
        }).catch((err)=>{
          console.log(err);
        })
      }else{
        this.$message({
          title: '提示',
          message: "请选择要分配的权限",
          type: 'info',
          duration: 2000
        })
      }
      
    }
  }
  
}
</script>
<style scoped>

</style>
